<template>
  <router-link to="/">router-link跳转</router-link>
  <button @click="goto">事件跳转</button>
  <button @click="router.push('/')">事件跳转2</button>
  <button @click="router.push('router-id/'+id)">参数跳转:{{id}}</button>
  <button @click="router.push('router-id?id='+id)">参数跳转:{{id}}</button>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const id = ref(Math.random());
// 执行路由跳转
const router = useRouter();
// 事件跳转
function goto(){
  router.push({
    path: '/'
  });
}
</script>

<style  scoped>
.router-link-active {
  color: #fff;
  font-weight: bold;
}
</style>
